<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <title>留言板</title>
</head>
<body>
<!--导航条-->
<nav th:replace="_fragments :: menu(6)"></nav>
<link rel="stylesheet" th:href="@{/css/alert_window.css}">
<!--中间内容-->
<div class="widget widget1" id="window1" hidden="hidden">
    <div class="body">
        <div class="msg" style="color: red;font-size: 20px">提示</div>
        <div style="height:20px"></div>
        <div class="msg"><b>留言信息不能为空!请确认后填写!</b></div>
        <div class="btns">
            <a href="javascript:void(0);" class="btn-confirm" id="btn_ok1">确 定</a>
        </div>
    </div>
</div>
<div class="widget widget1" id="window2" hidden="hidden">
    <div class="body">
        <div class="msg" style="color: red;font-size: 20px">提示</div>
        <div style="height:20px"></div>
        <div class="msg"><b>请确保填入的邮箱正确！</b></div>
        <div class="msg"><b>开启通知后，当留言被回复后你将收到一封邮件通知</b></div>
        <div class="btns">
            <a href="javascript:void(0);" class="btn-confirm" id="btn_ok2">确 定</a>
        </div>
    </div>
</div>
<div id="waypoint"  class="m-container m-padded-tb-big animated bounceInUp">
    <div class="ui container">
        <!--   留言区域     -->
        <div class="ui attached bottom segment m-bg">
            <!--输入区域-->
            <div id="message-form" class="ui  form">
                <div id="commentEditor" class="fields error" autofocus contenteditable="true" data-placeholder="请输入留言信息...">
                </div>
                <div class="fields">
                    <div class="field  m-margin-bottom-small m-mobile-wide" data-tooltip="表情未加载完全或点击无响应可刷新页面重试">
                        <button id="emojiBtn" type="button" class="ui yellow button m-mobile-wide"><i class="large smile outline icon"></i>表情
                        </button>
                    </div>
                    <div class="field m-margin-bottom-small m-mobile-wide">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" class="m-bg" name="nickname"  placeholder="您的昵称" value="">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" class="m-bg" name="email" placeholder="邮箱" >
                        </div>
                    </div>
                    <div class="field m-margin-bottom-small m-mobile-wide">
                        <button id="commentpost-btn" type="button" class="ui secondary m-bg-pink button m-mobile-wide">
                            <i class="edit icon"></i>
                            发布
                        </button>
                    </div>
                </div>
                <div class="ui error message"></div>
            </div>
            <input type="hidden" name="parentMessage.id" value="-1">
            <!--留言区域列表-->
            <div id="message-container"  class="ui segment m-bg m-top-color">
                <div th:fragment="messageList">
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        <!--多个评论-->
                        <div class="comment" th:each="message : ${messages.content}" th:if="!${message.parentMessage}">
                            <a class="avatar">
                                <img class="site-author-image" th:src="@{${message.avatar}}" >
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${message.nickname}">Abalone</span>
                                    <span class="ui mini left pointing  label m-padded-mini" th:classappend="${message.adminMessage} ? 'm-white m-bg-pink'" th:text="${message.adminMessage} ? '站长':'游客'">游客</span>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(message.createTime,'yyyy-MM-dd HH:mm')}">2021-01-17 12:01</span>
                                </div>
                                <div class="text" th:utext="${message.content}">妙啊,简洁易懂:)</div>
                                <div class="actions">
                                    <a class="reply" data-messageid="1" data-messagenickname="Abalone" th:attr="data-messageid=${message.id},data-messagenickname=${message .nickname}"  onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <div class="comments" th:if="${#arrays.length(message.replyMessages)>0}">
                                <div class="comment" th:each="reply : ${message.replyMessages}">
                                    <a class="avatar">
                                        <img class="site-author-image"  th:src="@{${reply.avatar}}" >
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span  th:text="${reply.nickname}">和煦</span>
                                            &nbsp;<span class="m-pink" th:text="'@ '+${reply.parentMessage.nickname}">@ 随心</span>
                                        </a>
                                        <span th:class="${reply.adminMessage} ? 'ui mini  left pointing m-white m-bg-pink label m-padded-mini':'ui mini  left pointing  label m-padded-mini'" th:text="${reply.adminMessage} ? '站长':'游客'">游客</span>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">2021-02-03 17:13</span>
                                        </div>
                                        <div class="text" th:utext="${reply.content}">sdasasdsa</div>
                                        <div class="actions">
                                            <a class="reply" data-messageid="1" data-messagenickname="和煦" th:attr="data-messageid=${reply.id},data-messagenickname=${reply .nickname}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui attached m-bg segment">
                <center>
                    <table class="m-mobile-wide" width="425px">
                        <tbody>
                        <tr align="center">
                            <td>
                                <a th:if="${a}" th:href="@{/Messages?page={num}(num=${messages.number})}" class="ui button basic mini">上一页</a>
                            </td>
                            <td>
                                第
                                <h8 class="m-pink" th:text="${messages.number}+1">1</h8>
                                页/共
                                <h8 class="m-pink" th:text="${messages.totalPages}">15</h8>
                                页
                                共
                                <h8 class="m-pink" th:text="${messages.totalElements}">146</h8>
                                条
                            </td>
                            <td>
                                <form name="pageForm" th:action="@{/Messages}" method="get">
                                    <div class="ui mini input ">
                                        <input type="text" class="m-bg" name="page" placeholder="页码" style="width: 50px!important; height: 27.76px!important;">
                                        <button style="font-size: 10px!important;width: 30px!important; height: 0px!important; border: none;margin: 5px;padding: 0;" class="m-pink m-bg" onclick="document.forms[('page'-1)].submit()">跳转
                                        </button>
                                    </div>
                                </form>
                            </td>
                            <td> &nbsp;</td>
                            <td class="  " style="float: right">
                                <a th:if="${b}" th:href="@{/Messages?page={num}(num=${messages.number}+2)}" class="ui button basic mini " style="float: right; ">下一页</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </center>
            </div>
        </div>
    </div>
</div>
<!--工具条-->
<div id="toolbar" class="m-bg animated fadeIn m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons">
        <div id="toTop-button" class="ui secondary m-bg-pink icon button"><i class="chevron up icon"></i></div>
    </div>
</div>
<!--页脚-->
<footer th:replace="_fragments::footer"></footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--/*/</th:block>/*/-->
<!--适配移动端和电脑端-->
<!--樱花飘落-->
<script type="text/javascript">
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {     //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.mobile) {
        //执行移动端的相关代码
        //alert("移动端");
        //设置移动端不显示网易云音乐插件
        /*      onload = function () {
                  var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
                  MusicDivShow.style.display = 'none';//控制层隐藏
              };*/
    } else if (!browser.versions.mobile) { //非移动端，动态加载js和div
        //设置电脑端显示网易云音乐插件
        // onload = function () {
        //     var MusicDivShow = document.getElementById('netEasy-music');//获取指定div中的元素
        //     MusicDivShow.style.display = 'block';//控制层显示
        // };
        // var script1 = document.createElement('script');
        // script1.type = 'text/javascript';
        // script1.src = '\\js\\snow.js';

        // <!-- 天气预报 -->
        // WIDGET = {FID: 'EtgqPWMbdv'}
        // var script4 = document.createElement('script');
        // script4.type = 'text/javascript';
        // script4.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111';

        var script2 = document.createElement('script');
        script2.type = 'text/javascript';
        // script2.src = 'https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js';
        script2.src = 'https://yremp.live/wp-content/uploads/resource/js/sakura.js';

        //画图
        // var script3 = document.createElement('script');
        // script3.type = 'text/javascript';
        // script3.color = '220,220,220';
        // script3.opacity = '0.7';//透明度
        // script3.zIndex = '-2';
        // script3.count = '200';
        // script3.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';

        // $('body').append(script1);
        // $('body').append(script4);天气预报
        $('body').append(script2);
        // $('body').append(script3);划线背景
    }
</script>
<script th:inline="javascript">
    <!--  滚动侦测  -->
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if(direction == 'down'){
                $("#toolbar").show(500);
            }else {
                $("#toolbar").hide(500);
            }
        }
    })
    <!-- 回到顶部   -->
    $("#toTop-button").click(function (){
        $(window).scrollTo(0,500)
    });
    <!-- 移动端导航条   -->
    $(".toggle.menu").click(function (){
        $(".m-item").toggleClass("m-mobile-hide")
    })
    /*加载emoji表情*/
    onload = function () {
        $("#commentEditor").emoji({
            button: "#emojiBtn",  //评论表情
            showTab: false,
            animation: 'slide',
            basePath: '/img/emoji',
            icons: emojiLists
        });

        $("#commentText").emojiParse({
            basePath: '/img/emoji',
            icons: emojiLists
        });
    };
    function postData() {
        $.ajax({
            cache: true,//保留缓存数据
            type: "POST",
            url: "/POSTMessages",
            data: {
                "parentMessage.id": $("[name='parentMessage.id']").val(),
                "nickname": $("[name='nickname']").val(),
                "email": $("[name='email']").val(),
                "content": document.getElementById("commentEditor").innerHTML,
            },
            async: true,//异步
            error: function (request) {
                alert("服务器出现了一个未知的错误");
            },
            success: function (data) {
                clearContent();
                $("#message-container").load("/Message");//刷新数据
            }
        });
    }

    function reply(obj) {
        var messageId = $(obj).data('messageid');
        var messagenickname = $(obj).data('messagenickname');
        $("[id='commentEditor']").attr("data-placeholder", "@" + messagenickname);
        $("[name='parentMessage.id']").val(messageId);
        $(window).scrollTo($('#message-form'), 500);
    }

    function clearContent() {
        $("[name='parentMessageId']").val(-1);
        document.getElementById("commentEditor").innerText ='';
        $("[id='commentEditor']").attr("data-placeholder", "请输入留言信息...");
    }


    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        var text = document.getElementById("commentEditor").innerHTML;
        if (boo && text != "") {
            console.log('校验成功');
            postData();
        } else if (text == "") {
            console.log('留言数据校验不通过');
            $('#window1').removeAttr('hidden');
            return;
        }
    });

    //评论表单验证
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的名字'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });

    $(function () {
        //确认
        $('#btn_ok1').click(function () {
            $('#window1').attr('hidden', 'hidden');
        });
        $('#btn_ok2').click(function () {
            $('#window2').attr('hidden', 'hidden');
        });
    });
</script>
</body>
</html>
